<template>
  <div class="myMerchant">
    <!-- 过期商户 -->
    <div class="query">
      <div class="search">
        <el-input
          v-model="search"
          size="mini"
          class="searchInput"
          placeholder="输入商户ID/商户名称/店铺名称/店铺账号/推荐人"
          clearable
          @keyup.enter.native="handleSearch(search)"
        ></el-input>
        <el-button
          size="mini"
          style="padding: 8px 20px;margin-left: 10px;border: none;color: #626366;background-color: #f1f1f1"
          @click="handleSearch(search)"
        >搜索</el-button>
      </div>
    </div>
    <!-- 高级查询内容 -->
    <el-collapse-transition>
      <div class="filtrate">
        <el-form ref="form" :model="form" label-width="110px">
          <el-form-item label="店铺状态">
            <el-radio-group v-model="form.status" size="mini">
              <el-radio-button label="-2">全部</el-radio-button>
              <el-radio-button label="0">正常</el-radio-button>
              <el-radio-button label="-1">禁用</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所选版本">
            <el-radio-group v-model="form.version" size="mini" @change="handleChooseId">
              <el-radio-button value="0" label="0">全部</el-radio-button>
              <el-radio-button value="2" label="2">高级试用版</el-radio-button>
              <el-radio-button
                v-for="(item, index) in versions"
                :key="index"
                :value="item.sv_versionid"
                :label="item"
                v-show="item.is_authority"
              >{{item.sv_versionname}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="注册时间">
            <div class="block">
              <el-date-picker
                v-model="form.register"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                style="margin-left: 12px"
                @change="handleChangeRegister"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="最后登录时间">
            <el-row>
              <el-col :sm="22" :xl="22">
                <el-radio-group v-model="form.lastloginday" size="mini">
                  <el-radio-button label="-1">全部</el-radio-button>
                  <el-radio-button label="0">今日</el-radio-button>
                  <el-radio-button label="1">一日内</el-radio-button>
                  <el-radio-button label="3">三日内</el-radio-button>
                  <el-radio-button label="7">近七天</el-radio-button>
                  <el-radio-button label="30">一个月内</el-radio-button>
                  <el-radio-button label="90">三个月内</el-radio-button>
                  <el-radio-button label="365">一年内</el-radio-button>
                </el-radio-group>
              </el-col>
              <el-col :sm="2">
                <el-button type="primary" size="mini" @click="handleFiltrate(form)">筛选</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <!-- 表格内容 -->
    <el-table
      @selection-change="handleSelect"
      :data="tableData"
      class="fromContent"
      style="font-size: 14px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <el-table-column width="50px" align="center" type="index" label="序号"></el-table-column>
      <el-table-column width="50px" align="center" type="selection"></el-table-column>
      <!-- 店铺ID -->
      <el-table-column align="center" label="店铺ID" min-width="120" prop="user_id"></el-table-column>
      <!-- 店铺名称 -->
      <el-table-column
        align="center"
        min-width="120"
        :show-overflow-tooltip="true"
        prop="sv_us_name"
        label="店铺名称"
      ></el-table-column>
      <!-- 商户姓名 -->
      <el-table-column
        align="center"
        min-width="120"
        :show-overflow-tooltip="true"
        prop="sv_ul_name"
        label="商户姓名"
      ></el-table-column>
      <!-- 店铺账号 -->
      <el-table-column align="center" label="店铺账号" min-width="120" prop="sv_ul_mobile"></el-table-column>
      <!-- 版本信息 -->
      <el-table-column align="center" width="100" label="软件版本" prop="sv_versionname"></el-table-column>
      <!-- 注册时间 -->
      <el-table-column
        min-width="160"
        align="center"
        prop="sv_ul_regdate"
        :formatter="dateFormat"
        label="注册时间"
      ></el-table-column>
      <!-- 到期时间 -->
      <el-table-column
        align="center"
        min-width="160"
        prop="sv_versionexpiration"
        label="到期时间"
        :formatter="dateFormat"
      ></el-table-column>
      <!-- 最后登录时间 -->
      <el-table-column
        align="center"
        min-width="160"
        prop="sv_ul_lastlogintime"
        label="最后登录"
        :formatter="dateFormat"
      ></el-table-column>
      <el-table-column align="center" label="操作" class="operate" min-width="160">
        <!-- scoped.row 指的是当前行的数据 -->
        <template slot-scope="scope">
          <el-button
            :style="{background: scope.row.sv_ul_status == 0 ? '#F56C6C' : '#67c23a'}"
            style="border: none"
            size="mini"
            type="primary"
            @click="handleDelete(scope.row)"
          >{{scope.row.sv_ul_status == 0 ? btnStatus[0] : btnStatus[1]}}</el-button>
          <el-button
            v-show="pageShow"
            size="mini"
            style="background: #0094ff;border-color: #0094ff"
            type="primary"
            @click="handleSendMsg(scope.row)"
          >发送短信</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 批量 -->
    <div class="batchSending" v-show="pageShow">
      <el-button
        size="medium"
        style="background: dodgerblue;border-color: dodgerblue"
        type="warning"
        @click="handleSendMoreMsg"
      >批量发送短信</el-button>
    </div>
    <!-- 这个是分页器 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: true,
      //
      btnStatus: ["禁用", "启用"],
      // 搜索的数据绑定
      search: "",
      // 高级查询的数据
      form: {
        version: "",
        register: "",
        expire: "",
        business: "",
        status: -2,
        MsgNo: -1,
        name: this.search,
        nreg_sdate: "", // 注册开始时间
        nreg_edate: "", // 注册结束时间
        exp_sdate: "", // 到期开始时间
        exp_edate: "", // 到期结束时间
        sv_versionid: "", // 选择版本id
        sv_versionname: "", // 选择版本
        // &sv_versionname=${this.form.sv_versionname}
        lastloginday: "",
        storetype: "",
        multipletype: "",
        dec_payment_method: "",
        nearexpiration: "",
        sub_distributor_id: ""
      },
      // 软件版本
      versions: [],
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      // 权限隐藏
      pageShow: true,
      // 批量
      idList: [],
      url: "",
      // 身份令牌
      myToken: ""
    };
  },
  components: {
    Pagination
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      if (this.userId != 1) {
        // 隐藏权限不足页面
        this.pageShow = false;
      }
      // 版本号信息
      this.$api
        .accordingToIdGetVersion("1,3", false, this.myToken)
        .then(res => {
          const { list } = res;
          var data = res.data;
          // console.log(list);
          this.versions = list.map(v => {
            const { sv_versionid } = v;
            Getversionid_authority(data, sv_versionid);
            var is_authority;
            function Getversionid_authority(data, sv_versionid) {
              is_authority = sv_versionid == 9 ? false : true;
              if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                  if (sv_versionid == data[i].id) {
                    is_authority = data[i].state;
                    break;
                  }
                }
              } else if (sv_versionid == 9) {
                is_authority = false;
              } else {
                is_authority = true;
              }
              return is_authority;
            }
            v.is_authority = is_authority;
            return {
              ...v
            };
          });
        });
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      this.form.exp_sdate = "2017-01-01 00:00:00";
      this.form.exp_edate = new Date().Format("yyyy-MM-dd hh:mm:ss");
      // 初始化列表
      this.getOrderData();
    },
    // 获取订单列表
    getOrderData() {
      this.loading = true;
      const urlParameter = {
        status: this.form.status,
        MsgNo: this.form.MsgNo,
        nreg_sdate: this.form.nreg_sdate,
        nreg_edate: this.form.nreg_edate,
        exp_sdate: this.form.exp_sdate,
        exp_edate: this.form.exp_edate,
        sv_versionid: this.form.sv_versionid,
        sv_versionname: this.form.sv_versionname,
        lastloginday: this.form.lastloginday,
        storetype: this.form.storetype,
        multipletype: this.form.multipletype,
        dec_payment_method: this.form.dec_payment_method,
        nearexpiration: this.form.nearexpiration,
        sub_distributor_id: this.form.sub_distributor_id,
        code: this.form.code
      };
      this.$api
        .getBusinesslistings(
          this.pageIndex,
          this.pageSize,
          this.search.trim(),
          urlParameter,
          this.myToken
        )
        .then(res => {
          this.loading = false;
          const { dataList, total } = res;
          this.total = total;
          if (dataList == null) {
            this.tableData = dataList;
            return;
          }
          this.tableData = dataList.map((v, i) => {
            // 没有记录的时间显示为空
            if (v.sv_ul_lastlogintime.substring(0, 1) == "0") {
              v.sv_ul_lastlogintime = null;
            }
            if (v.sv_versionexpiration.substring(0, 1) == "0") {
              v.sv_versionexpiration = null;
            }
            return {
              ...v,
              timing: this.timing
            };
          });
        });
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 格式化注册时间
    handleChangeRegister(val) {
      if (val != null) {
        this.form.nreg_sdate = new Date(val[0]).Format("yy-MM-dd hh:mm:ss");
        this.form.nreg_edate = new Date(val[1]).Format("yy-MM-dd hh:mm:ss");
      } else {
        this.form.nreg_sdate = "";
        this.form.nreg_edate = "";
      }
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    // 搜索功能
    handleSearch(val) {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 进行筛选
    handleFiltrate(val) {
      this.form = val;
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 选择版本id
    handleChooseId(val) {
      if (val == 2) {
        this.form.sv_versionid = 2;
        this.form.sv_versionname = "高级试用版";
      } else {
        this.form.sv_versionid = val.sv_versionid;
        this.form.sv_versionname = val.sv_versionname;
      }
    },
    // 禁用启用
    handleDelete(val) {
      this.$confirm(`是否改变店铺状态?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (val.sv_ul_status == 0) {
            this.$api.disableTheStore(val.user_id, this.myToken).then(res => {
              if (res) {
                this.$message({
                  message: "禁用成功",
                  type: "success"
                });
              } else {
                this.$message.error("操作失败");
              }
            });
          } else if (val.sv_ul_status == -1) {
            this.$api
              .enableTheStore(val.user_id, this.myToken, val.sv_ul_mobile)
              .then(res => {
                if (res) {
                  this.$message({
                    message: "启用成功",
                    type: "success"
                  });
                } else {
                  this.$message.error("操作失败");
                }
              });
          }
          this.getOrderData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 发送短信接口
    sendmsg() {
      this.$api.sendSms(this.idList, this.myToken).then(res => {
        const { values, succeed } = res;
        if (succeed) {
          this.$message({
            type: "success",
            message: values
          });
        } else {
          this.$message.error(values);
        }
      });
    },
    // 发送单个短信
    handleSendMsg(val) {
      this.$confirm("是否发短信提醒该商户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.idList = [];
          this.idList.push(val.user_id);
          this.sendmsg();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发送"
          });
        });
    },
    // 批量发送
    handleSelect(val) {
      this.idList = [];
      val.forEach((item, i) => {
        this.idList.push(item.user_id);
      });
    },
    handleSendMoreMsg() {
      this.sendmsg();
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.myMerchant {
  background-color: #fff;
  padding: 20px;
  // 搜索部分的样式
  .query {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    .search {
      display: flex;
      .searchInput {
        width: 320px;
        margin-right: 10px;
      }
    }
  }
  .filtrate {
    margin: 20px 0;
    margin-top: 0;
    background-color: #f1f1f1;
    .el-radio-button {
      margin-right: 10px;
    }
  }
  // 筛选的每一项
  .filtrate @{deep} .el-form-item {
    margin-bottom: 0;
  }
  // 筛选项的标题
  .filtrate @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
  }
  // 筛选项的内容
  .filtrate @{deep} .el-radio-button__inner {
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
    color: #626366;
    font-size: 14px;
  }
  // 筛选项选中内容
  .filtrate @{deep} .is-active .el-radio-button__inner {
    background-color: #f1f1f1;
    border: 1px solid #439fff;
    box-shadow: unset;
    color: #666;
    border-radius: 4px;
  }
  // 表格的样式
  .fromContent {
    margin: 0 auto 20px;
    .serviceIcon {
      cursor: pointer;
      font-size: 12px;
      margin-right: 2px;
      padding: 3px 10px;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      box-sizing: border-box;
      background-color: #3399ff;
    }
    .tipInfo {
      position: absolute;
      top: 0;
      right: 70px;
    }
    // 总分店的样式
    .dec {
      background-color: #3399ff;
      color: #fff;
      padding: 0px 8px;
      &.fendian {
        background-color: #ff6600;
      }
    }
    .timing {
      background-color: #67c23a;
      color: #fff;
      cursor: pointer;
      padding: 3px 8px;
      font-size: 12px;
      width: max-content;
      margin: 0 auto;
    }
  }
  .iconBtn {
    // color: #fff;
    font-size: 24px;
    padding: 1px 8px;
    cursor: pointer;
    border-radius: 6px;
    // font-weight: 600;
  }
  // 更改自带样式
  .fromContent @{deep} .serveBox.el-button {
    border: none;
    padding: 0;
    margin-right: 5px;
  }
  .fromContent
    @{deep}
    .el-table__body-wrapper.is-scrolling-none
    ~ .el-table__fixed-right {
    z-index: 0;
  }
  .fromContent @{deep} .el-table__fixed-right {
    z-index: 0;
  }
  .batchSending {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    // color: dodgerblue
  }
}
// 更改表头颜色
.myMerchant @{deep} .el-table th {
  background-color: #fafafa;
  color: #252525;
  font-weight: 100;
}
.myMerchant @{deep} .el-table::before {
  height: 0;
}
.myMerchant @{deep}.el-button + .el-button {
  margin-left: 0;
}
</style>